<template>
  <ADrawerPro title="添加菜单" width="640px" v-bind="$attrs" :open="props.open" :closable="false">
    <div class="content-container">
      <AForm class="content-form" ref="formRef" :model="formState" @finish="onFinish" @reset="onReset">
        <AFormItem label="上级菜单">{{ props.initValues?.parentName }}</AFormItem>
        <AFormItem label="菜单类型" name="menuType" help="提交后成功类型不可变更" validate-status="warning">
          <ARadioGroup v-model:value="formState.menuType">
            <ARadio value="CATALOG" :disabled="props.typeDisable?.includes('CATALOG')">目录</ARadio>
            <ARadio value="MENU" :disabled="props.typeDisable?.includes('MENU')">菜单</ARadio>
            <ARadio value="BUTTON" :disabled="props.typeDisable?.includes('BUTTON')">按钮</ARadio>
          </ARadioGroup>
        </AFormItem>

        <template v-if="formState.menuType === 'CATALOG'">
          <AFormItem label="菜单名称" name="menuName" :rules="menuRules.menuName">
            <AInput v-model:value="formState.menuName" placeholder="请输入菜单名称"></AInput>
          </AFormItem>
          <div class="form-group">
            <AFormItem label="菜单图标" name="menuIcon">
              <SelectIcon v-model:value="formState.menuIcon" placeholder="请输入菜单图标"></SelectIcon>
            </AFormItem>
            <AFormItem label="显示顺序" name="orderNum">
              <AInputNumber id="inputNumber" v-model:value="formState.orderNum" />
            </AFormItem>
          </div>

          <div class="form-group">
            <AFormItem label="路由地址" name="menuPath" :rules="menuRules.menuPath">
              <AInput v-model:value="formState.menuPath" placeholder="请输入路由地址"></AInput>
            </AFormItem>
            <AFormItem label="菜单状态" name="status">
              <ARadioGroup v-model:value="formState.status">
                <ARadio :value="0">正常</ARadio>
                <ARadio :value="1">停用</ARadio>
              </ARadioGroup>
            </AFormItem>
          </div>
        </template>

        <template v-if="formState.menuType === 'MENU'">
          <AFormItem label="菜单名称" name="menuName" :rules="menuRules.menuName">
            <AInput v-model:value="formState.menuName" placeholder="请输入菜单名称"></AInput>
          </AFormItem>
          <div class="form-group">
            <AFormItem label="菜单图标" name="menuIcon">
              <SelectIcon v-model:value="formState.menuIcon" placeholder="请输入菜单图标"></SelectIcon>
            </AFormItem>
            <AFormItem label="显示顺序" name="orderNum">
              <AInputNumber id="inputNumber" v-model:value="formState.orderNum" />
            </AFormItem>
          </div>

          <div class="form-group">
            <AFormItem label="组件地址" name="component" :rules="menuRules.component">
              <AInput v-model:value="formState.component" placeholder="请输入组件地址"></AInput>
            </AFormItem>
            <AFormItem label="权限标识" name="menuCode" :rules="menuRules.menuCode">
              <AInput v-model:value="formState.menuCode" placeholder="请输入权限标识"></AInput>
            </AFormItem>
          </div>

          <div class="form-group">
            <AFormItem label="路由地址" name="menuPath" :rules="menuRules.menuPath">
              <AInput v-model:value="formState.menuPath" placeholder="请输入路由地址"></AInput>
            </AFormItem>
            <AFormItem label="路由参数" name="query" :rules="menuRules.query">
              <AInput v-model:value="formState.query" placeholder="请输入路由参数"></AInput>
            </AFormItem>
          </div>
          <div class="form-group">
            <AFormItem label="链接类型" name="linkType">
              <ARadioGroup v-model:value="formState.linkType">
                <ARadio :value="0">内部</ARadio>
                <ARadio :value="1">外部</ARadio>
              </ARadioGroup>
            </AFormItem>
            <AFormItem label="标签离开" name="tabClose">
              <ARadioGroup v-model:value="formState.tabClose">
                <ARadio :value="0">不关闭</ARadio>
                <ARadio :value="1">关闭</ARadio>
              </ARadioGroup>
            </AFormItem>
          </div>
          <div class="form-group">
            <AFormItem label="显示状态" name="visible">
              <ARadioGroup v-model:value="formState.visible">
                <ARadio :value="0">显示</ARadio>
                <ARadio :value="1">隐藏</ARadio>
              </ARadioGroup>
            </AFormItem>
            <AFormItem label="菜单状态" name="status">
              <ARadioGroup v-model:value="formState.status">
                <ARadio :value="0">正常</ARadio>
                <ARadio :value="1">停用</ARadio>
              </ARadioGroup>
            </AFormItem>
          </div>
        </template>

        <template v-if="formState.menuType === 'BUTTON'">
          <div class="form-group">
            <AFormItem label="按钮名称" name="menuName" :rules="menuRules.buttonName">
              <AInput v-model:value="formState.menuName" placeholder="请输入按钮名称"></AInput>
            </AFormItem>
            <AFormItem label="显示顺序" name="orderNum">
              <AInputNumber id="inputNumber" v-model:value="formState.orderNum" />
            </AFormItem>
          </div>

          <div class="form-group">
            <AFormItem label="权限标识" name="menuCode" :rules="menuRules.menuCode">
              <AInput v-model:value="formState.menuCode" placeholder="请输入权限标识"></AInput>
            </AFormItem>
            <AFormItem label="菜单状态" name="status">
              <ARadioGroup v-model:value="formState.status">
                <ARadio :value="0">正常</ARadio>
                <ARadio :value="1">停用</ARadio>
              </ARadioGroup>
            </AFormItem>
          </div>
        </template>

        <AFormItem style="text-align: center">
          <ASpace>
            <AButton html-type="reset">取消</AButton>
            <AButton type="primary" html-type="submit" :loading="loading">提交</AButton>
          </ASpace>
        </AFormItem>
      </AForm>
    </div>
  </ADrawerPro>
</template>

<script setup>
import { ref, toValue, watch } from 'vue';
import { ADrawerPro } from '@/components/iteration';
import { SelectIcon } from '@/components/common';
import { useState } from '@/hooks';
import { menuRules } from '@/constants/rules';

defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  open: { type: Boolean, default: false },
  typeDisable: { type: Array, default: () => [] },
  initValues: { type: Object, default: () => ({ parentName: '主目录' }) },
  onFinish: Function,
  onCancel: Function
});

const defaultValues = {
  parentId: '0',
  menuType: 'CATALOG',
  orderNum: 1,
  visible: 0,
  status: 0,
  linkType: 0,
  tabClose: 0
};

const formRef = ref();
const [formState, setFormState] = useState(defaultValues);
const [loading, setLoading] = useState(false);

watch(
  () => props.open,
  (val) => {
    val && setFormState({ ...defaultValues, ...props.initValues });
  }
);
const onFinish = async (values) => {
  try {
    setLoading(true);
    await props.onFinish?.(values);
    toValue(formRef).resetFields();
  } catch (error) {
    await Promise.reject(error);
  } finally {
    setLoading(false);
  }
};

const onReset = () => {
  toValue(formRef).resetFields();
  setFormState(defaultValues);
  props.onCancel?.();
};
</script>

<style lang="scss" scoped>
.content-container {
  padding: 24px;
  user-select: none;
}

.content-container .content-form {
  :deep(.form-group) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  :deep(.ant-form-item) {
    .ant-form-item-label {
      width: 80px;
    }

    .ant-input-number {
      width: 100%;
    }
  }
}
</style>
